<template>
  <div class="flex">
    <ga-button type="text" style="padding: 0" @click="handleEdit()">编辑</ga-button>
    <ga-button type="text" style="padding: 0 ;color:red ;margin-left: 5px;" @click="handleDelete()">删除</ga-button>
    <createSys ref="createSysRef" :isEdit="true" :record="record" @fetchData="fetchData" />
  </div>
</template>

<script setup>
import { ref, defineProps, toRefs } from 'vue'
import { deleteSystem } from '@/api/system.js'
import { Message, Modal } from "@garco-design/web-vue";
import createSys from "@/views/containerSystem/components/editSystem.vue"

const props = defineProps({
  record: {
    required: true,
    default: null
  }
})
const { record } = toRefs(props)
const createSysRef = ref()

const emits = defineEmits([
  "fetchData",
])
const handleEdit = () => {
  createSysRef.value.open()
}

const handleDelete = () => {
  Modal.warning({
    title: "删除",
    titleAlign: "",
    content: ` 删除后数据不可恢复，确认是否删除`,
    hideCancel: false,
    onBeforeOk: async () => {
      console.log("----------");
      await deleteSystem(record.value.id);
      Message.success("操作成功");
      emits("fetchData");
    },
  });
}

</script>
<style lang="scss" scoped></style>